<template>
  <div>
    <el-steps style="max-width: 600px;margin: 0 auto;background:transparent;" :active="active" :space="200" align-center
      finish-status="success">
      <el-step title="基础信息" :icon="Document" />
      <el-step title="资料上传" :icon="UploadFilled" />
    </el-steps>
    <div class="step_content">
      <el-form v-show="active === 0" :model="form" :inline="true" ref="form" label-position="left" :rules="rules"
        label-width="150px">
        <div class="step_title">基础信息</div>
        <el-form-item label="验收负责人" prop="person">
          <el-input v-model="form.person" placeholder="请输入验收负责人" clearable />
        </el-form-item> 、
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系方式" clearable />
        </el-form-item>
        <el-form-item label="版本名称" prop="versionName">
          <el-input v-model="form.versionName" placeholder="请输入版本名称" clearable />
        </el-form-item>
        <el-form-item label="发布时间" prop="releaseTime">
          <el-date-picker v-model="form.releaseTime" value-format="YYYY-MM-DD" type="date"
            placeholder="请选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="验收说明" prop="instructions" style="width:calc(100% - 32px);">
          <el-input v-model="form.instructions" placeholder="可考虑从进度回顾、执行结果验收成果等方面做简要说明" clearable type="textarea"
            maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div class="step_title">权属信息</div>
        <el-form-item label="权属说明" prop="ownershipDirections">
          <el-input v-model="form.ownershipDirections" placeholder="可考虑从数据资源所有权、加工权和经营权三方面做简要说明" clearable type="textarea"
            maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
        </el-form-item>
        <div class="step_title">计量信息</div>
        <el-form-item label="初始化计量方法" prop="measurementMethod">
          <el-select v-model="form.measurementMethod" placeholder="请选择初始化计量方法" clearable>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产原值" prop="originalPrice">
          <el-input v-model="form.originalPrice" readonly placeholder="请输入资产原值" clearable />
        </el-form-item>
        <el-form-item label="资产管理人" prop="assetManager">
          <el-input v-model="form.assetManager" placeholder="请输入资产管理人" clearable />
        </el-form-item>
        <el-form-item label="达到预定用途时间" prop="estimatedTime">
          <el-date-picker v-model="form.estimatedTime" value-format="YYYY-MM-DD" type="date"
            placeholder="请选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="预计净残值" prop="expectedValue">
          <el-input v-model="form.expectedValue" placeholder="请输入预计净残值" clearable />
        </el-form-item>
        <el-form-item label="使用寿命是否有限" prop="isLimited" style="width:calc(100% - 32px);">
          <el-radio-group v-model="form.isLimited">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
          <FileUpload :isShowTip="false" :needDetail="true" :fileType="[]" v-model="form.limitedFile">
            <template #content>
              <el-button type="success" icon="upload">上传凭证</el-button>
            </template>
          </FileUpload>
          <el-row>
            <el-col :span="12">总计不大于100M</el-col>
            <el-col :span="12" style="color:#bedd80;">已使用0.00M</el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="预计有效年数" prop="validYears">
          <el-input v-model="form.validYears" placeholder="请输入预计有效年数" clearable />
        </el-form-item>
        <el-form-item label="撤销方法" prop="amortizationMethod">
          <el-select v-model="form.amortizationMethod" placeholder="请选择撤销方法" clearable>
            <el-option label="1" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="初始累计摊销" prop="grandTotal">
          <el-input v-model="form.grandTotal" placeholder="请输入初始累计摊销" clearable />
        </el-form-item>
        <el-form-item label="月摊销额" prop="monthTotal">
            <el-input v-model="form.monthTotal" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              placeholder="请输入月摊销额" clearable>
              <template #append>元</template>
            </el-input>
          </el-form-item>
      </el-form>
      <div v-if="active === 1">
        <div class="step_title">资料上传</div>
        <el-alert show-icon :title="tips[Number(form.projectType) - 1]" type="warning" :closable="false"
          style="margin-bottom: 10px;" />
        <FileUpload :isShowTip="false" :needDetail="true" :fileType="[]" v-model="form.fileArray" :drag="true">
          <template #content>
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </template>
        </FileUpload>
      </div>
    </div>
    <div class="step_footer">
      <el-button @click="cancle">取消</el-button>
      <el-button @click="pre">上一步</el-button>
      <el-button type="primary" @click="next">暂存</el-button>
      <el-button v-if="active !== 1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active === 1" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script setup name="End">
import { UploadFilled, Document } from '@element-plus/icons-vue'
import { onMounted } from 'vue';
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const active = ref(0)
const fileUrl = ref('')
const tips = [
  '请上传所需资料包括但不限于采购计划书、采购审批单、经济可行性分析报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书'
]
const data = reactive({
  form: {
    projectName: 'casdfas',
    projectNo: '',
    projectStage: '',
    projectMethod: '',
    projectType: 1,
    projectStartTime: '',
    projectEndTime: '',
    projectAmount: '',
    projectResult: '',
    dateRange: '',
    phone: '',
    person: '',
    amount: '',
    fileUrl: '',
    techList: []
  },
  rules: {
    projectNo: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
    projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    projectType: [{ required: true, message: "请选择项目类型", trigger: "change" }],
    dateRange: [{ required: true, message: "请输入项目时间", trigger: "change" }],
    // phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    // person: [{ required: true, message: "请输入项目负责人", trigger: "blur" }],
    desc: [{ required: true, message: "请输入项目简介", trigger: "blur" }],
    amount: [{ required: true, message: "请输入采购金额", trigger: "blur" }],
  }
});

const { form, rules } = toRefs(data);
const pre = () => {
  active.value--
}
const next = () => {
  active.value++
  if (active.value === 0) {
    proxy.$refs["form"].validate(valid => {
      if (valid) {
        // active.value++
      }
    })
  }
}
const submit = () => {

}
const cancle = () => {
  router.push({
    path: '/PM/list'
  })
}
const addResource = () => {
  form.value.techList.push({
    type: '',
    sourceType: '',
    database: '',
    path: '',
    port: '',
    username: '',
    password: '',
  })
}
const handleLink = () => {

}
onMounted(() => {
  const type = route.query.type
  uploadText.value = type === 1 ? '请上传所需资料包括但不限于技术可行性分析报告、成果价值分析报告、资本化评审意见书、数据资源使用说明' :
    type === 2 ? '请上传所需资料包括但不限于技术可行性分析报告、成果价值分析报告、资本化评审意见书、数据资源使用说明' :
      'type'
})
</script>

<style lang="scss" scoped>
.step_content {
  height: calc(100vh - 180px);
  overflow: auto;
  padding: 20px 60px;
}

.step_title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
  margin: 20px 0 20px;

  &::before {
    position: absolute;
    left: 0;
    height: 20px;
    width: 4px;
    background-color: #3970e3;
    content: "";
  }
}

.step_upload {
  margin-top: 10px;
}

.step_footer {
  text-align: center;
}

:deep(.el-form--inline .el-form-item) {
  width: calc(50% - 32px);
}
</style>